<template>
  <div class="content" id="loginPage">
    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="bg"
    >
    </vue-particles>
    <div class="loginModal">
      <div class="loginTitle">登录</div>
      <el-form ref="loginForm" :rules="rules" :model="loginForm" label-width="80px">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="loginForm.username" placeholder="请输入登录用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input show-password v-model="loginForm.password" placeholder="请输入登录密码"></el-input>
        </el-form-item>
        <div class="loginBtn">
          <el-button type="primary" @click="submitLogin('loginForm')">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
// import {encrypt} from '@/common/login.js'
export default {
  name: "login",
  data() {
    return {
      loginForm:{
        username:'admin',
        password:'123456'
      },
      rules: {
          username: [
            { required: true, message: '请输入登录用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            { min: 6, max: 8, message: '长度在 6 到 8 个字符', trigger: 'blur' }
          ],
      }
    };
  },
  methods: {
    submitLogin(formName){
      const _this= this;
      this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = {...{},..._this.loginForm}
            // params.password = encrypt(params.password);
            this.$request({
              url:{
                name:'login',
                params,
              },
              method: 'POST',
            }).then(res=>{
              if(res.success){
                _this.$router.push({path:'/'})
              }
            })
            // 
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
#loginPage{
  position: fixed;
  width: 100vw;
  height:100vh;
  z-index: 0;
  left:0;
  top:0;
}
.bg {
  background-image: url("../assets/images/login.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
}
.loginModal{
  position: fixed;
  z-index: 10;
  background: rgba(255,255,255,0.9);
  width: 400px;
  min-height:200px;
  top:0;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  border-radius:0.3em;
  padding:20px;
  .el-form{
    padding-right:30px;
    margin-top:20px;
  }
}
.loginTitle{
  font-size:18px;
  text-align: center;
  color:#666;
}
.loginBtn{
  text-align: right;
  padding-bottom:20px;
  button{
    width: 90%;
  }
}
</style>